<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="../js/vue.min.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="doSomething">doSomething</button>
    <br>
    下面是缩写方法
    <br>
    <div @click="doSomething">doSomething</div>


    <button v-on:click="counter += 1">增加 1</button>
    <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
<script>
    new Vue({
        el: '#app',
        data:{
            counter:0,
            menu:""
        },
        mounted() {
            this.menu=this.formateData()
        }
        ,
        methods: {
            doSomething: function (event) {
                alert("事件被激活");
                // `event` 是原生 DOM 事件
                alert(event.target.tagName)
                console.log(this.menu)
            },
            formateData:function(){
                let result=[]
                result= JSON.parse('[{"id":1,"author":"曹雪芹","name":"红楼梦","price":32},{"id":2,"author":"施耐庵","name":"水浒传","price":30},{"id":"3","author":"罗贯中","name":"三国演义","price":24},{"id":4,"author":"吴承恩","name":"西游记","price":20}]')
                console.log(result)
                return result
            }
        }
    })
</script>
</body>
</html>
